<template>
  <!-- 404 Not Found页面 -->
  <div class="not-found">
    <div class="img-wrap">
      <h2>404 Not Found</h2>
      <img src="../assets/images/404.png" alt="" class="img-404" />
      <a href="javascript:;" class="back" @click="$router.go(-1)"></a>
    </div>
  </div>
</template>

<script>
// 基于准备好的dom，初始化echarts实例
export default {};
</script>

<style lang="less" scoped>
.not-found {
  position: relative;
  height: 100%;
  text-align: center;
  .img-wrap {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%);
  }
  h2 {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-40%);
    font-size: 50px;
    color: #333;
  }
  .img-404 {
    width: 800px;
  }
  .back {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 124px;
    height: 52px;
    background: url('../assets/images/back1.png') no-repeat;
    &:hover {
      background: url('../assets/images/back2.png') no-repeat;
    }
    &:active {
      background: url('../assets/images/back3.png') no-repeat;
    }
  }
}
</style>
